import React, { useState } from 'react';
import '../../styles/liu/register.scss'
import { Button, Checkbox, Form, Input, Select,message } from 'antd';
import pic from '../../assets/liu/logo.png'
import { useNavigate } from 'react-router-dom'
import { MessageFilled } from '@ant-design/icons';
import { registerUser, getUserList } from '../../api/liu/index'
import Avatar from 'antd/es/avatar/avatar';
interface Props {

}
function Register(props: Props) {
    const navigate = useNavigate()
    const [messageApi,contextHolder] = message.useMessage();
    const { Option } = Select;


    //表单验证通过提交
    const onFinish = async (values: any) => {
        var res = await getUserList()
        var flag = res.data.find((item: any) => {
            return item.phone == values.phone
        })
        if (!flag) {
            registerUser({...values,avatar:"",good:"",intro:""}).then((res:any)=>{
                if(res.status==201){
                    messageApi.open({
                        type: 'success',
                        content: '注册成功',
                      });
                      navigate("/login")
                }
            })
        }else{
            messageApi.open({
                type: 'error',
                content: '注册失败,该账号已存在',
              });
        }
    };

    //手机号的验证器
    var phoneValidator = (rule: any, value: string) => {
        if (/^1[3-9]\d{9}$/.test(value)) {
            return Promise.resolve()
        } else {
            return Promise.reject(new Error('请输入正确的手机号'))
        }
    }
    //密码的验证器
    var passValidator = (rule: any, value: string) => {
        if (value.length == 6) {
            return Promise.resolve()
        } else {
            return Promise.reject(new Error('密码必须是六位'))
        }
    }

    return (
        <div className='register'>
            {contextHolder}
            <div className="box">
                <div className="left">
                    <h4>家庭医生后台管理系统</h4>
                    <img src={pic} alt="" />
                </div>
                <div className="right">
                    <MessageFilled />
                    <h3>注册账号</h3>
                    <Form
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="name"
                            rules={[{ required: true, message: '请输入姓名' }]}
                        >
                            <Input placeholder='请输入医生姓名' />
                        </Form.Item>

                        <Form.Item
                            name="phone"
                            rules={[{ required: true, message: '请输入手机号码', validator: phoneValidator }]}
                        >
                            <Input placeholder='请输入手机号' />
                        </Form.Item>

                        <Form.Item
                            name="pass"
                            rules={[{ required: true, message: '请输入密码', validator: passValidator }]}
                        >
                            <Input.Password placeholder='请输入密码' />
                        </Form.Item>

                        <Form.Item
                            name="sex"
                            rules={[{ required: true, message: '请选择性别' }]}
                        >
                            <Select
                                placeholder="请选择性别"
                                allowClear
                            >
                                <Option value="1">男</Option>
                                <Option value="2">女</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            name="role"
                            rules={[{ required: true, message: '请选择医生角色' }]}
                        >
                            <Select
                                placeholder="请选择医生角色"
                                allowClear
                            >
                                <Option value="0">超级管理员</Option>
                                <Option value="1">系统管理员</Option>
                                <Option value="2">全科医师</Option>
                                <Option value="3">全科护士</Option>
                                <Option value="4">护理医师</Option>
                            </Select>
                        </Form.Item>


                        <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 0, span: 24 }}>
                            <Checkbox>我已阅读并同意 《<a>用户隐私政策</a>》</Checkbox>
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 0, span: 24 }}>
                            <Button type="primary" htmlType="submit">注册账号</Button>
                        </Form.Item>

                    </Form>
                </div>
            </div>
        </div>
    );
}

export default Register;